const canvas = document.getElementById('canvas') as HTMLCanvasElement;
console.log(canvas);

const ctx = canvas.getContext('2d')!;

let earth_angel = 0;
let moon_angel = 0;

function draw() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);

    //  绘制太阳
    ctx.beginPath();
    ctx.fillStyle = '#e67e22';
    ctx.shadowColor = '#d35400';
    ctx.shadowBlur = 10;
    ctx.arc(0,0,80,0,2*Math.PI);
    ctx.fill();
    ctx.closePath();

    ctx.rotate((earth_angel+=0.3)*Math.PI/180);

    // 绘制地球
    ctx.beginPath();
    ctx.fillStyle = '#2980b9';
    ctx.shadowBlur = 0;

    ctx.arc(180,0,30,0,2*Math.PI);
    ctx.fill();
    ctx.closePath();

    ctx.translate(180,0);
    ctx.rotate((moon_angel+=1)*Math.PI/180);            

    // 绘制月亮
    ctx.beginPath();
    ctx.fillStyle = '#bdc3c7';
    ctx.arc(50,0,10,0,2*Math.PI);
    ctx.fill();
    ctx.closePath();

    ctx.restore();

    requestAnimationFrame(draw);
}

export default draw;